<template>
  <div class="camps-list">
    <search-list ref="campList" :api-url="$url.CampList" :option="searchOpt" :itemPerRow="8">
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="cover" label="封面">
        <template slot-scope="scope">
          <img :src="`${scope.row.cover}?x-oss-process=image/resize,w_200,h_200`" />
        </template>
      </el-table-column>
      <el-table-column prop="level" label="课程难度">
        <template slot-scope="scope">
          <span>{{ $selectFormat['courseLevelSl'](scope.row.level).label }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="location" label="线下地点"></el-table-column>
      <el-table-column prop="online" label="特训营类型">
        <template slot-scope="scope">
          <span>{{ $selectFormat['online'](scope.row.online).label }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="onlineAt" label="开课时间"></el-table-column>
      <el-table-column prop="period" label="期数"></el-table-column>
      <el-table-column prop="applyTime" label="特训营时间段"></el-table-column>
      <el-table-column prop="code" label="特训营代码"></el-table-column>
      <el-table-column prop="population" label="招生人数"></el-table-column>
      <el-table-column prop="price" label="费用"></el-table-column>
      <el-table-column prop="priceDetail" label="价格描述"></el-table-column>
      <el-table-column prop="createdAt" label="创建时间" width="150px"></el-table-column>
      <el-table-column prop="updatedAt" label="更新时间" width="150px"></el-table-column>
      <el-table-column label="操作" v-if="!selectedMode">
        <template slot-scope="scope">
          <el-button type="text" v-permission="['camps:check']" @click="check(scope.row)">
            修改
          </el-button>
          <el-button type="text" v-permission="['camps:applylist']" @click="apply(scope.row)">
            报名列表
          </el-button>
        </template>
      </el-table-column>

      <div class="btn-after" slot="btn-after">
        <el-button icon="el-icon-plus" @click="add" v-permission="['camps:add']">
          新增特训营
        </el-button>
      </div>
    </search-list>
    <el-dialog title="特训营" :visible.sync="dialogVisible">
      <data-form
        :formConfig="formConfig"
        v-model="formData"
        ref="form"
        :rules="campRule"
      ></data-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="normal" @click="dialogVisible = false">取 消</el-button>
        <el-button size="normal" type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="报名列表" :visible.sync="applyListVisible" v-if="applyListVisible">
      <search-list
        ref="applyList"
        :api-url="$url.CampApplylist"
        :itemPerRow="8"
        :beforeQuery="beforeQuery"
        id="out-table"
      >
        <el-table-column prop="id" label="报名序号"></el-table-column>
        <el-table-column prop="nickname" label="报名用户"></el-table-column>
        <el-table-column prop="userPhone" label="报名手机号"></el-table-column>
        <el-table-column prop="username" label="姓名"></el-table-column>
        <el-table-column prop="sex" label="性别">
          <template slot-scope="scope">
            <span>{{ $selectFormat['sex'](scope.row.sex).label }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="school" label="学校"></el-table-column>
        <el-table-column prop="major" label="专业" width="150px"></el-table-column>
        <el-table-column prop="phone" label="联系电话" width="150px"></el-table-column>
        <el-table-column prop="wechat" label="微信" width="150px"></el-table-column>
        <el-table-column prop="createdAt" label="报名时间" width="150px"></el-table-column>
        <div slot="btn-after" class="btn-after">
          <a :href="baseUrl + `/camp/applylistExport?campId=${campId}`" class="exportBtn">
            导出表格
          </a>
        </div>
      </search-list>
    </el-dialog>
  </div>
</template>

<script>
  import DataForm from 'comp/DynamicForm';
  import { FormRuleConf } from '@/config';
  export default {
    components: {
      DataForm,
    },
    props: {
      selectedMode: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        ...FormRuleConf.Camp,
        selectedData: [],
        searchOpt: [
          // {
          //   type: 'channelKindSl',
          //   name: 'kind',
          //   label: '频道类型',
          // },
          // {
          //   type: 'platformSl',
          //   name: 'platform',
          //   label: '平台类型',
          // },
          // {
          //   type: 'onlineSl',
          //   name: 'online',
          //   label: '在线状态',
          // },
        ],
        dialogVisible: false,
        applyListVisible: false,
        campId: '',
        baseUrl: process.env.VUE_APP_BASE_URL,
        formConfig: {
          inline: false,
          labelPosition: 'right',
          labelWidth: '',
          size: 'normal',
          statusIcon: true,
          disabled: false, // 表单是否可用
          formItemList: [
            {
              key: 'cover',
              type: 'img',
              label: '封面',
            },
            {
              key: 'title',
              type: 'input',
              label: '标题',
            },
            {
              key: 'level',
              type: 'radio',
              label: '课程难度',
              value: 0,
              options: [
                {
                  value: 0,
                  label: '新手入门',
                },
                {
                  value: 1,
                  label: '初级进阶',
                },
                {
                  value: 2,
                  label: '中级拔高',
                },
                {
                  value: 3,
                  label: '高级挑战',
                },
              ],
            },
            {
              key: 'online',
              type: 'radio',
              label: '特训营类型',
              value: 0,
              options: [
                {
                  value: 0,
                  label: '线下',
                },
                {
                  value: 1,
                  label: '线上',
                },
              ],
            },
            {
              key: 'onlineAt',
              type: 'datetime',
              label: '开课时间',
              value: '',
              valueFormat: 'yyyy-MM-dd HH:mm:ss',
            },
            {
              key: 'location',
              type: 'input',
              label: '线下地点',
            },
            {
              key: 'applyTime',
              type: 'input',
              label: '特训营时间段',
            },
            {
              key: 'code',
              type: 'input',
              label: '	特训营代码',
            },
            {
              key: 'period',
              type: 'input',
              label: '期数',
            },
            {
              key: 'population',
              type: 'input',
              label: '招生人数',
              subtype: 'number',
              value: '0',
            },
            {
              key: 'price',
              type: 'input',
              label: '费用',
              subtype: 'number',
              value: '0',
            },
            {
              key: 'priceDetail',
              type: 'input',
              label: '价格描述',
            },
          ],
        },
        formData: {},
      };
    },
    methods: {
      /**
       * 新增
       */
      add() {
        this.clear();
        this.dialogVisible = true;
      },
      /**
       * 删除选择的频道
       */
      del() {
        this.$confirm(
          `确认删除所选的 ${this.selectedData.length} 条数据? 删除之后无法恢复! 请谨慎操作`,
          {
            title: '删除',
            type: 'warning',
          },
        )
          .then(() => {
            return this.$service.CmsModuleDelete({
              moduleId: this.selectedData.map((data) => data.id).join(','),
            });
          })
          .then(() => {
            this.$message.success('删除成功');
            this.$refs['moduleList'].getList();
            this.selectedData = [];
          });
      },
      check(row) {
        console.log(row);
        this.dialogVisible = true;
        this.formData = { ...row };
        this.formConfig.formItemList.map((item) => {
          if (item.key === 'level') {
            item.value = this.formData.level;
          } else if (item.key === 'online') {
            item.value = this.formData.online;
          }
        });
      },
      apply(row) {
        this.applyListVisible = true;
        this.campId = row.id;
      },
      beforeQuery({ searchInfo }) {
        searchInfo.campId = this.campId;
      },
      submit() {
        this.$refs.form.$children[0].validate((valid) => {
          if (valid) {
            console.log(this.formData);
            if (this.formData.level == '' && this.formData.online == '') {
              this.formData.level = 0;
              this.formData.online = 0;
            }
            this.$service
              .CampSave({ ...this.formData }, JSON_HEADER)
              .then((res) => {
                console.log(res);
                this.clear();
                this.$refs.campList.getList();
              })
              .catch((err) => {});
          }
        });
      },
      clear() {
        this.dialogVisible = false;
        this.formData = {};
      },
    },
  };
</script>
<style lang="less" scoped>
  .exportBtn {
    background: blue;
    color: #fff;
    padding: 5px 20px;
    border-radius: 5px;
  }
</style>
